@extends('backend::layout')
@section('title',$page_title)
@push('styles')
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/cascader/cascader.css')}}" rel="stylesheet">
    <link href="{{asset('assets/vendor/other/jquery.searchableSelect.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="row">
        <div class="col-lg-12">
            @if($actions->isNotEmpty())
                @component('backend::component.form.form')
                @slot('form_title') {{$page_title}} @endslot
                @slot('formId') manager-menu @endslot
                @slot('action') {{$action}} @endslot
                    @component('backend::component.form.form-group')
                        @slot('title') 路由 @endslot
                            <select name="route_name" class="form-control form-control-md">
                                @foreach($actions as $name=>$title)
                                    <option  value="{{$name}}" data-title="{{$title}}">
                                        {{$title}}
                                    </option>
                                @endforeach
                            </select>
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 菜单名称 @endslot
                        @component('backend::component.form.input')
                            @slot('name') menu_title @endslot
                        @endcomponent
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 父菜单 @endslot
                        @slot('class') menu-group @endslot
                        <div class="layui-input-block">
                            @component('backend::component.form.input')
                                @slot('name') menu_icon @endslot
                                @slot('attr')
                                     id="menu_parent"
                                     data-parents="{{$parent_menus}}"
                                      readonly="readonly"
                                @endslot
                            @endcomponent
                            <input type="hidden" id="menu-value" name="menu_parents"  value="{{$parent_ids}}">
                        </div>
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 图标 @endslot
                        @slot('attr') id="set-menu" @endslot
                        <div class="layui-input-block">
                            @component('backend::component.form.input')
                                @slot('name') menu_icon @endslot
                                @slot('attr') id="iconPicker" @endslot
                                @slot('value') hcl-biaodan @endslot
                            @endcomponent
                        </div>
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 排序 @endslot
                        @component('backend::component.form.input')
                            @slot('name') sort @endslot
                            @slot('value') 1000 @endslot
                        @endcomponent
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 描述 @endslot
                        @component('backend::component.form.textarea')
                            @slot('name') comment @endslot
                        @endcomponent
                    @endcomponent
                    @component('backend::component.form.form-group')
                        @slot('title') 状态 @endslot
                         <div>
                            @foreach(['0'=>'禁用','1'=>'启用'] as $value=>$title)
                                @component('backend::component.radio')
                                    @slot('title') {{$title}} @endslot
                                    @slot('name') status @endslot
                                    @slot('value') {{$value}} @endslot
                                 @endcomponent
                            @endforeach
                         </div>
                    @endcomponent

                @slot('buttons')
                    @component('backend::component.form.button')
                        @slot('title') 提交 @endslot
                        @slot('params') {"formId":"#manager-menu"} @endslot
                        @slot('class') btn-min-width ajax-form @endslot
                    @endcomponent
                    @component('backend::component.form.button')
                        @slot('title') 重置 @endslot
                        @slot('type') reset @endslot
                        @slot('color') danger @endslot
                        @slot('class') btn-min-width @endslot
                    @endcomponent
                @endslot
            @endcomponent
            @else
                @component('backend::component.tpl_frame')
                    @slot('page_title'){{$page_title}}@endslot
                    @slot('body_content')
                        @include('backend::public.empty_page',['info'=>'没有可添加菜单'])
                    @endslot
                @endcomponent
            @endif
        </div>
        <!--/.col-->
    </div>
@endsection
@push('scripts')
    <script src="{{asset('assets/vendor/other/jquery.searchableSelect.js')}}"></script>
    <script>
        layui.use(['jquery','layer','cascader','iconPicker'], function(){
            var $ = layui.jquery;
            var layer = layui.layer;
            var cascader = layui.cascader;
            var iconPicker = layui.iconPicker;
            init();

            function init(){
                $('select[name="route_name"]').searchableSelect({
                    afterSelectItem:function () {
                        var title = $(this.element).find('option:selected').data('title');
                        $('input[name="menu_title"]').val(title);
                    }
                });
                selectParentMenu();
                iconPickerMenu();
            }

            function selectParentMenu() {
                var data = $('#menu_parent').data('parents');
                var defaultVal = "{{$parent_ids}}".split(',');
                cascader({
                    elem: "#menu_parent",
                    data: data,
                    triggerType: "change",
                    value: defaultVal,
                    changeOnSelect:true,
                    success:function (valData) {
                        $('#menu-value').val(valData);
                    }
                });
            }

            function  iconPickerMenu() {
                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    iconClass:'hcl',
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12
                });
                iconPicker.checkIcon('iconPicker', 'hcl-biaodan','hcl');
            }
        });
    </script>
@endpush